<template>
    <el-dialog class="ui-document-view-dlg" top="3rem" v-model="dialogVisible" :title="dialogTitle" ref="dialog" @opened="init" :beforeClose="beforeClose" @closed="finalThings">
        <div class="title">{{ dtD[type].text }}</div>
        <div class="header">
            <div style="padding:0 0 0 .5rem" v-datetime="document.createtime"></div>
            <div></div>
            <div>{{ document.document_no }}</div>
        </div>
        <el-table :data="data" border max-height="40vh">
            <el-table-column prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column prop="store_name" width="140">
                <template #header="scope">
                    <span>{{ headers[type][0].label }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="isMove()" prop="target_name" width="140">
                <template #header="scope">
                    <span>{{ headers[type][2].label }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="num" align="right" width="88">
                <template #header="scope">
                    <span>{{ headers[type][1].label }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="!isMove()" prop="amount" align="right" :formatter="rmbFormatter" width="88">
                <template #header="scope">
                    <span>{{ headers[type][3].label }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <div>支付方式:</div><div>{{ smD[document.settle_mode].text }}</div>
            <template v-if="!isMove()">
                <div>商品总额:</div><div v-rmb="document.amount"></div>
            </template>
            <div>操作员:</div><div>{{ accounts[document.operator_uid]?.realname}}</div>
            <div>商品总数:</div><div>{{ num_goods }}</div>
            <div>备注:</div><div>{{ document.desc }}</div>
        </div>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="danger" @click="onCancel">关闭窗口</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { useSocket } from '../../../uiframe/services/socket';
import { reactive, toRefs } from 'vue-demi';
import {dt, dtD, sm, smD} from '~/uiframe/utils';
import directives from '~/uiframe/services/directives';
import { dict } from '../../../uiframe/utils';

export default {
    directives,
    props:{
        q:Object,
        done: Function,
        document:Object
    },
    setup:(props)=>{
        const sale_header = [ // 销售
            {prop:'store_name', label:'仓库'},
            {prop:'num', label:'售出数目'},
            null,
            {prop:'amount', label:'金额'}
        ],
        headers = [
            [ // 采购
                {prop:'store_name', label:'仓库'},
                {prop:'num', label:'采购数目'},
                null,
                {prop:'num', label:'付款'}
            ],[ // 出货
                {prop:'store_name', label:'仓库'},
                {prop:'num', label:'出货数目'},
                null,
                {prop:'num', label:'收款'}
            ],[ // 上架
                {prop:'store_name', label:'源仓库'},
                {prop:'num', label:'上架数目'},
                {prop:'target_name', label:'目标仓库'},
            ],[ // 下架
                {prop:'store_name', label:'源仓库'},
                {prop:'num', label:'下架数目'},
                {prop:'target_name', label:'目标仓库'},
            ],[ // 盘点
                {prop:'store_name', label:'仓库'},
                {prop:'num', label:'盘点数目'},
                null,
                {prop:'num', label:'盈亏'}
            ],[ // 退货
                {prop:'store_name', label:'仓库'},
                {prop:'num', label:'退货数目'},
                null,
                {prop:'num', label:'退款'}
            ],sale_header,sale_header,sale_header
        ],
        document = props.document, data = reactive({
            dialogVisible: true,
            dialogTitle:'单据详情',
            dialog:null, elForm:null,
            headers, data:[],
            accounts:{},stores:{},
            num_goods:0
        }),rules =[

        ],
        methods = {
            isMove:()=>document.document_type == 2 || document.document_type == 3, //上架下架
            onCancel:()=>data.dialogVisible=false,
            init:()=>{},
            beforeClose:(next)=>{
                next();
            },
            finalThings:()=>props.done(),
            rmbFormatter:(r,c,v)=>{return v.toFixed(2)}
            
        };
        useSocket().then(socket=>{
            socket.rpc('accounts',{}).then(res=>{
                data.accounts = dict(res.data.data, 'id')
                socket.rpc('stores',{}).then(res=>{
                    let s = dict(res.data, 'id');
                    data.stores = s;
                    socket.rpc('document.detail', {id:document.id}).then(res=>{
                        let hi = document.document_type, sid = res.data[0].store_id, tid = res.data[0].target_id; // 仓库id
                        if(tid > 0){
                            data.headers[hi][0].label = s[sid].prop==1 ? '源货架':'源仓库';
                            data.headers[hi][2].label = s[tid].prop==1 ? '目标货架':'目标仓库';
                        }else{
                            data.headers[hi][0].label = s[sid].prop==1 ? '货架':'仓库';
                        }
                        data.data = res.data;
                        data.num_goods = res.data.reduce((a,b)=>a+b.num, 0);
                    })
                })
            })
            
        })
        return {
            ...toRefs(data),
            ...methods,
            rules,
            dt,dtD, sm, smD,
            type:document.document_type
        }
    }
}
</script>
<style lang="scss">
.ui-document-view-dlg{
    width:50rem;max-width: 50rem;
    .el-dialog__body{
        padding: 0 1rem 0rem 1rem;
        .title{font-size:1.5rem; color:var(--el-color-primary);text-align: center; line-height: 200%;}
        .header{
            display: grid;
            grid-template-columns: 12rem auto 12.3rem;
            line-height:220%;
        }
        .footer{
            display:grid;
            grid-template-columns: 5rem auto 5rem 7rem;
            >div{
                line-height:220%;
            }
            :nth-child(odd){text-align:right;padding-right:.5rem;}
        }
    }
}
</style>